<template>

  <div class="app-container home" v-if="this.$store.state.user.info.userType=='00'">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-select
          v-model="projectId"
          placeholder="建设项目"
          size="small"
          style="width: 240px" @change="handleProjectChange"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.projectId"
            :value="item.projectId"
            :label="item.projectName"></el-option>
        </el-select>
      </el-col>

      <!--      <el-col :span="1.5">-->
      <!--        <el-input v-model="lng" style="width: 240px" :readonly="true"></el-input>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-input v-model="lat" style="width: 240px" :readonly="true"></el-input>-->
      <!--      </el-col>-->
    </el-row>

    <el-row style="padding-top: 5px;">
      <el-col :span="6">
        <div class="outer-div">
          <div class="inner-div bg1">
            <div style="padding-left: 10px; padding-top: 10px; font-size: 16px;">
              合同总金额
            </div>
            <div style="padding-left: 10px; padding-top: 10px; font-size: 30px;">
              {{this.project.contractTotal}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="outer-div">
          <div class="inner-div bg2">
            <div style="padding-left: 10px; padding-top: 10px; font-size: 16px;">
              本月完成金额
            </div>
            <div style="padding-left: 10px; padding-top: 10px; font-size: 30px;">
              {{this.project.currentTotal}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="outer-div">
          <div class="inner-div bg3">
            <div style="padding-left: 10px; padding-top: 10px; font-size: 16px;">
              累计完成金额
            </div>
            <div style="padding-left: 10px; padding-top: 10px; font-size: 30px;">
              {{this.project.currentEndTotal}}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="outer-div">
          <div class="inner-div bg4">
            <div style="padding-left: 10px; padding-top: 10px; font-size: 16px;">
              变更金额
            </div>
            <div style="padding-left: 10px; padding-top: 10px; font-size: 30px;">
              {{this.project.changeTotal}}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row style="padding-top: 10px;">
      <el-card class="box-card">
        <div slot="header">
          <span>人员概况</span>
        </div>
        <el-row>
          <el-col :span="6">
            <div class="staff-div">
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8;"><b>建管办人员</b></div>
              <div style="padding-top:5px; font-size: 32px; color: rgba(0, 0, 255, 0.4);"><b>{{this.project.yz}}</b></div>
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8"><b>进场{{this.project.yz1}}人<img :src="up"> 离场{{this.project.yz2}}人<img :src="down"></b></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="staff-div">
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8;"><b>监理人员</b></div>
              <div style="padding-top:5px; font-size: 32px; color: rgba(255, 125, 0, 0.4);"><b>{{this.project.jl}}</b></div>
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8"><b>进场{{this.project.jl1}}人<img :src="up"> 离场{{this.project.jl2}}人<img :src="down"></b></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="staff-div">
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8;"><b>承包商人员</b></div>
              <div style="padding-top:5px; font-size: 32px; color: rgba(60, 180, 30, 0.4);"><b>{{this.project.cbs}}</b></div>
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8"><b>进场{{this.project.cbs1}}人<img :src="up"> 离场{{this.project.cbs2}}人<img :src="down"></b></div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="staff-div">
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8;"><b>劳务人员</b></div>
              <div style="padding-top:5px; font-size: 32px; color: rgba(255, 0, 0, 0.4);"><b>{{this.project.lwg}}</b></div>
              <div style="padding-top:5px; font-size: 14px; color: #c1b8b8"><b>进场{{this.project.lwg1}}人<img :src="up"> 离场{{this.project.lwg2}}人<img :src="down"></b></div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <el-row style="padding-top: 10px;">
      <el-col :span="8">
        <el-card style="height: calc(50vh - 10px)">
          <PieChart v-if="show" :project-id="this.projectId" />
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 5px;">
        <el-card style="height: calc(50vh - 10px)">
          <BarChart v-if="show" :project-id="this.projectId" />
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 5px;">
        <el-card style="height: calc(50vh - 10px)">
          <LineChart v-if="show" :project-id="this.projectId" />
        </el-card>
      </el-col>
    </el-row>

    <!--    <el-row style="padding-top: 10px;">-->
    <!--      <el-col :span="24">-->
    <!--        <div id="map" class="map">-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

  </div>

  <div class="app-container home" v-else>

  </div>

</template>

<script>

  import { loadMapData, loadProjectTotalData, loadProjectPersonData } from "@/api/index";
  import { selectProjectList } from "@/api/project/project";
  // import start from "@/assets/map/startPoint.png";
  // import build from "@/assets/map/build.png";
  import up from "@/assets/images/index/arrow_up.png";
  import down from "@/assets/images/index/arrow_down.png";
  import PieChart from '@/views/dashboard/index/PieChart';
  import LineChart from '@/views/dashboard/index/LineChart';
  import BarChart from "@/views/dashboard/index/BarChart";

  export default {
    name: "Index",
    components: {
      PieChart,
      LineChart,
      BarChart
    },
    data() {
      return {
        activeName: "",
        // 项目ID
        projectId: undefined,
        // 图表是否显示
        show: false,
        // 项目列表
        projectOptions: [],
        // 百度地图实例
        map:null,
        lng: undefined,
        lat: undefined,
        // startIcon: start,
        // buildIcon: build,
        up: up,
        down: down,
        project: {
          contractTotal: 0,
          changeTotal: 0,
          currentTotal: 0,
          currentEndTotal: 0,
          yz: 0,
          yz1: 0,
          yz2: 0,
          jl: 0,
          jl1: 0,
          jl2: 0,
          cbs: 0,
          cbs1: 0,
          cbs2: 0,
          lwg: 0,
          lwg1: 0,
          lwg2: 0
        }
      };
    },
    mounted() {
      console.log(this.$store.state.user);
      this.init();
    },
    methods: {
      // 初始化页面
      init() {
        // 加载项目下拉框
        selectProjectList().then(response => {
          if (response.projects.length > 0) {
            this.projectOptions = response.projects;
            this.projectId = response.projects[0].projectId;
            // this.loadMapData();
            this.loadProjectTotalData();
            this.loadProjectPersonData();
            this.show = true;
          }
        });
      },
      // 项目发生改变
      handleProjectChange() {
        // this.loadMapData();
        this.loadProjectTotalData();
        this.loadProjectPersonData();
      },
      // 加载项目地图数据
      loadMapData() {
        this.map = null;
        loadMapData(this.projectId).then(response => {
          this.initMap(response);
        });
      },
      // 初始化地图
      initMap(response) {
        const self = this;
        // 创建地图实例
        this.map = new BMap.Map("map");
        // self.map.setMapType(BMap.BMAP_SATELLITE_MAP);
        // 设置地图基础属性
        this.setBasicsProperty(response.basic);
        // 设置地图线路
        this.setLine(response.basic, response.linePoints, response.lineColors);
        // 设置地图标记物
        this.setMarker(response.markerPoints, self);
      },
      // 设置地图基本属性
      setBasicsProperty(basic) {
        // 创建点坐标
        let point = new BMap.Point(basic.centerLng, basic.centerLat);
        this.map.centerAndZoom(point, basic.zoom);
        this.map.setMapType(BMAP_HYBRID_MAP);
        // 最小级别，最大级别
        this.map.setMinZoom(basic.minZoom);
        this.map.setMaxZoom(basic.maxZoom);
        // let mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP]});
        // this.map.addControl(mapType1);
        // 添加比例尺控件
        if (basic.isScale == 'Y') {
          let scaleControl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
          this.map.addControl(scaleControl);
        }
        // 右上角，仅包含平移和缩放按钮
        if (basic.isNavigation) {
          let navigationControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
          });
          this.map.addControl(navigationControl);
        }
        this.map.enableScrollWheelZoom();
        // this.map.setMapType("BMAP_SATELLITE_MAP");
        // this.map.setMapType("BMAP_SATELLITE_MAP");
        // 地图自定义样式
        // this.map.setMapStyleV2({
        //   styleId: '05875855980eaf8710ec03af79e1b42e'
        // });
        // 地图添加点击事件
        this.map.addEventListener("click", this.handleMapClick);
      },
      handleMapClick(e) {
        this.lng = e.point.lng;
        this.lat = e.point.lat;
      },
      // 设置地图线路
      setLine(basic, allLinePoints, lineColors) {
        if (allLinePoints.length > 0) {
          let lastItem = null;
          let lines = [];
          let linePoints = [];
          allLinePoints.forEach((item) => {
            if (lastItem) {
              if (lastItem.institutionCode != item.institutionCode) {
                lines.push({
                  code: lastItem.institutionCode,
                  linePoints: linePoints
                });
                linePoints = [];
              }
            }
            linePoints.push(new BMap.Point(item.lng, item.lat));
            lastItem = item;
          });
          lines.push({
            code: lastItem.institutionCode,
            linePoints: linePoints
          });
          lines.forEach((item) => {
            let code = item.code;
            let color = '#18a45b';
            lineColors.forEach((bid) => {
              if (code == bid.code) {
                color = bid.color;
              }
            });
            let points = item.linePoints;
            // 创建路线
            let polyline = new BMap.Polyline(points, {
              //折线的宽度，以像素为单位
              strokeWeight: basic.lineStrokeWeight,
              //折线的透明度，取值范围0 - 1
              strokeOpacity: basic.lineStrokeOpacity,
              //折线颜色
              strokeColor: color
            });
            // polyline.addEventListener("click", function() {
            //   self.handleLineClick(this, code);
            // });
            this.map.addOverlay(polyline);
          });
        }
      },
      // 设置地图标记
      setMarker(markerPoints, self) {
        console.log("调用setMarker方法");
        if (markerPoints.length > 0) {
          console.log("绘制标记点");
          markerPoints.forEach((item) => {
            var icon = new BMap.Icon(this.buildIcon, new BMap.Size(32, 32), {//是引用图标的名字以及大小，注意大小要一样
              //这句表示图片相对于所加的点的位置
              anchor: new BMap.Size(10, 30)
            });
            let marker = new BMap.Marker(new BMap.Point(item.lng, item.lat), {
              icon: icon,
              title: item.name
            });
            marker.addEventListener("click", function(){
              self.handleMarkerClick(item.markerType, item.foreignKey);
            });
            this.map.addOverlay(marker);
          });
        }
      },
      // 标记点击事件
      handleMarkerClick(markerType, foreignKey) {
        console.log(markerType);
        console.log(foreignKey);
      },
      // 加载项目相关金额数据
      loadProjectTotalData() {
        loadProjectTotalData(this.projectId).then(response => {
          // console.log(response);
          this.project.contractTotal = response.contractTotal;
          this.project.changeTotal = response.changeTotal;
          this.project.currentTotal = response.currentTotal;
          this.project.currentEndTotal = response.currentEndTotal;
        });
      },
      // 加载项目相关人员数据
      loadProjectPersonData() {
        loadProjectPersonData(this.projectId).then(response => {
          // console.log(response);
          this.project.yz = response.yz;
          this.project.yz1 = response.yz1;
          this.project.yz2 = response.yz2;
          this.project.jl = response.jl;
          this.project.jl1 = response.jl1;
          this.project.jl2 = response.jl2;
          this.project.cbs = response.cbs;
          this.project.cbs1 = response.cbs1;
          this.project.cbs2 = response.cbs2;
          this.project.lwg = response.lwg;
          this.project.lwg1 = response.lwg1;
          this.project.lwg2 = response.lwg2;
        });
      }
    },
  };
</script>

<style scoped lang="scss">
  .map {
    width: 100%;
    height: 49vh;
  }
  .outer-div {
    position: relative;
    height: 130px;
    /*background-color: green;*/
    /*border: 1px solid black;*/
  }
  .inner-div {
    width:350px;
    height: 120px;
    position: absolute;
    color: white;
  }
  .bg1 {
    border-radius: 5px;
    background:-webkit-gradient(linear, 0 0, 100 0, from(rgb(0, 0, 255, 0.4)), to(rgba(0, 0, 255, 0.4)));
    box-shadow: 0px 5px 10px 0px rgb(0, 0, 255, 0.3);
  }
  .bg2 {
    border-radius: 5px;
    background:-webkit-gradient(linear, 0 0, 100 0, from(rgba(255, 125, 0, 0.4)), to(rgba(255, 125, 0, 0.4)));
    box-shadow: 0px 5px 10px 0px rgb(255, 125, 0, 0.3);
  }
  .bg3 {
    border-radius: 5px;
    background:-webkit-gradient(linear, 0 0, 100 0, from(rgba(60, 180, 30, 0.4)), to(rgba(60, 180, 30, 0.4)));
    box-shadow: 0px 5px 10px 0px rgb(60, 180, 30, 0.3);
  }
  .bg4 {
    border-radius: 5px;
    background:-webkit-gradient(linear, 0 0, 100 0, from(rgba(255, 0, 0, 0.4)), to(rgba(255, 0, 0, 0.4)));
    box-shadow: 0px 5px 10px 0px rgb(255, 0, 0, 0.3);
  }
  .staff-div {
    width: 80%;
    /*border: 1px solid black;*/
    text-align: center;
  }
  .home {
    blockquote {
      padding: 10px 10px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
  }
  ::v-deep .BMap_cpyCtrl {
    display: none;
  }
  ::v-deep .anchorBL {
    display: none !important;
  }
</style>
